import Panel from "../../elements/Panel";
import Header from "../../components/Header";
import {connect} from "react-redux";
import {fetch} from "../../actions";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";
import DownDrop from "./../../components/category";
import {md5Url, URL} from '../../libs/Url';
import {Fetch_} from '../../libs/';
import {t} from '../../libs/schedule';
const SCHEDULE = React.createClass({
        getInitialState(){
            return {
                open: false,
                selected: '',
                form: [],
                schedule_body: [],
                subjects: [],
                class_num: {
                    1: {
                        en: 'one',
                        cn: '一'
                    },
                    2: {
                        en: 'two',
                        cn: '二'
                    },
                    3: {
                        en: 'three',
                        cn: '三'
                    },
                    4: {
                        en: 'four',
                        cn: '四'
                    },
                    5: {
                        en: 'five',
                        cn: '五'
                    },
                    6: {
                        en: 'six',
                        cn: '六'
                    },
                    7: {
                        en: 'seven',
                        cn: '七'
                    },
                    8: {
                        en: 'eight',
                        cn: '八'
                    },
                    9: {
                        en: 'nine',
                        cn: '久'
                    },
                    10: {
                        en: 'ten',
                        cn: '十'
                    },
                }
            }

        },
        setchange(index, content){
            const self = this;
            self.setState({
                form: [
                    ...self.state.form.slice(0, index),
                    Object.assign({}, self.state.form[index], {
                        value: content,
                        tips: content.length ? '' : '该项必填',
                    }),
                    ...self.state.form.slice(index + 1),
                ]
            })
        },
        componentDidMount() {
            const {dispatch} = this.props;
            // dispatch(fetch(SUBJECT.SCHEDULE, {url: URL.SCHEDULE_FIND}));
            dispatch(fetch({url: URL.SCHEDULE_GET}));
        },
        onsubmit(){
            const self = this;

            var form = [
                ...self.state.schedule_body.slice(0, 4),
                ...self.state.schedule_body.slice(5)
            ];
            const class_num = this.state.class_num;

            var res = new Array();

            try {
                _.range(0, 8).map(it=> {
                    var tem = {};
                    if (it) {
                        form.forEach((item, idx)=> {
                            tem[class_num[idx + 1].en + 'text'] = item[it].text;
                            tem[class_num[idx + 1].en] = item[it].id;
                        });
                        res.push(tem);
                    }

                });
            } catch (e) {
                console.log(e.stack)
            }


            Fetch_(URL.SCHEDULE_ADD, {body: {timetable: res}, method: 'POST'})
                .then(data=> {
                    console.log(data);
                    alert('成功')
                })
                .catch(e=> {
                    console.log(e);
                    alert(e.result.reason || '保存失敗!');
                });

        },
        componentWillReceiveProps(nextProps) {
            if ((!!nextProps[md5Url.SCHEDULE_GET]) && _.isObject(nextProps[md5Url.SCHEDULE_GET].list)) {
                var subjects = nextProps[md5Url.SCHEDULE_GET].list.subject;
                var timetable = nextProps[md5Url.SCHEDULE_GET].list.timetable;
                var classtime = nextProps[md5Url.SCHEDULE_GET].list.classtime;
                console.log(timetable);
                this.setState({
                    schedule_body: t(subjects, timetable.length ? timetable : [
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                        {
                            "one": "",
                            "onetext": "",
                            "two": "",
                            "twotext": "",
                            "three": "",
                            "threetext": "",
                            "four": "",
                            "fourtext": "",
                            "five": "",
                            "fivetext": "",
                            "six": "",
                            "sixtext": "",
                            "seven": "",
                            "seventext": "",
                            "eight": "x",
                            "eighttext": "",
                            "nine": "                ",
                            "ninetext": "",
                            "ten": "                ",
                            "tentext": "",
                        },
                    ], classtime, true), subjects: subjects
                });
            }

        },
        render(){
            const self = this;
            const schedule_header = ['', '', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];

            return (
                <div>
                    <Panel>
                        <Header>课程表</Header>
                        <div>
                            <table className="table table-bordered general-table">
                                <thead>
                                <tr>
                                    {
                                        schedule_header.map((item, index)=> {
                                            if (!item)return <th key={index} className="text-center"></th>;
                                            else {
                                                return <th key={index}>{item}</th>;
                                            }
                                        })
                                    }
                                </tr>
                                </thead>
                                <tbody>
                                {
                                    self.state.schedule_body.map((item, index)=> {
                                        if (item.type == 'column')  return <tr key={index}>
                                            <td className="text-center" colSpan="9">{item.text}</td>
                                        </tr>;
                                        return <tr key={index}>
                                            {(index == 0) && <td rowSpan={4} className="text-center">上<br/>午</td>}
                                            {(index == 5) && <td rowSpan={6} className="text-center">下<br/>午</td>}

                                            {item.map((i_, idx)=> {
                                                if (i_.type == 'time') {
                                                    return <td key={idx} className="text-center">
                                                        {i_.text}
                                                    </td>
                                                } else {
                                                    return <td key={idx} className="text-center">
                                                        <DownDrop
                                                            label={i_.text || '选择课程'}
                                                        >
                                                            {
                                                                self.state.subjects.map((item, index_)=> {
                                                                    return <li key={index_}>
                                                                        <a href="javascript:void(0);" onClick={()=> {
                                                                            console.log('[' + (idx ) + ',' + (index ) + ']' + item);
                                                                            self.setState({
                                                                                schedule_body: [
                                                                                    ...self.state.schedule_body.slice(0, index),
                                                                                    [
                                                                                        ...self.state.schedule_body[index].slice(0, idx),
                                                                                        Object.assign({}, self.state.schedule_body[index][idx], {
                                                                                            text: item.name,
                                                                                            id: item.id
                                                                                        }),
                                                                                        ...self.state.schedule_body[index].slice(idx + 1),
                                                                                    ],
                                                                                    ...self.state.schedule_body.slice(index + 1)
                                                                                ]
                                                                            })
                                                                        }}>{item.name}</a>
                                                                    </li>
                                                                })
                                                            }
                                                        </DownDrop>
                                                    </td>
                                                }
                                            })}
                                        </tr>
                                    })
                                }
                                </tbody>
                            </table>
                            <div className="text-center">
                                <button onClick={()=> {
                                    self.onsubmit()
                                }} className="btn btn-success" type="submit"> 保存
                                </button>
                            </div>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                            <br/>
                        </div>
                    </Panel>
                </div>
            )
        }
    })
    ;
function select(state) {
    return {
        [md5Url.SCHEDULE]: state.fetchBySubject[md5Url.SCHEDULE],
        [md5Url.SCHEDULE_ADD]: state.fetchBySubject[md5Url.SCHEDULE_ADD],
        [md5Url.SCHEDULE_GET]: state.fetchBySubject[md5Url.SCHEDULE_GET],
        [PAGE_SUBJECT.SCHEDULE]: state.pageBySubject[PAGE_SUBJECT.SCHEDULE]
    }
}
export default connect(select)(SCHEDULE)